<template>
  <view class="quotationlist">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
    <u-sticky bgColor="#fff">
      <u-tabs :list="tabs" lineColor="#FF5E01" :activeStyle="{color: '#FF5E01'}" @click="changeTabs"></u-tabs>
    </u-sticky>
	<div class="con-list-div" style="padding:0 32rpx">
		<div class="inquiry-list-item" v-for="(item,index) in list" :key="index" @click="detail(item)" :id="index == 0 ?'priceListBtn' : ''">
			<div class="inquiry-state grey" v-if="item.priceState == 50 || item.priceState == 60 || item.priceState == 70 || item.priceState == 80|| item.priceState == 90 ">{{item.priceState | priceState}}</div>
			<div class="inquiry-state yellow" v-else-if="item.priceState == 30">{{item.priceState | priceState}}</div>
			<div class="inquiry-state" v-else>{{item.priceState | priceState}}</div>
			<div class="box-top">
				<div class="inquiry-item-top">{{item.inquiryTitle}}</div>
				<div class="item-cell-div">
					<div class="item-cell" style="display: inline-block;padding-right:40rpx;">
						<span class="label">询价数量：</span>
						<span class="text">{{item.goodsNum}}吨</span>
					</div>
					<div class="item-cell" style="margin-top:10rpx;">
						<span class="label">收货信息：</span>
						<span class="text"> {{item.receiveArea}}{{item.receiveDate}}{{item.priceSendTypes}}</span>
					</div>
				</div>
				<div class="box-mid">
					<div class="mid-cell flex-cell">
						<div>产品报价：<span style="color:#FF0404;font-weight: bold;">￥{{item.purchasePrice}}</span></div>
						<div v-if="item.reducePrice != ''">买家还价：<span>￥{{item.reducePrice}}</span></div>
					</div>
					<div class="mid-cell"> <text>{{item.sendArea}}</text><text style="padding-left:10rpx">{{item.sendDate}}发货</text><text style="padding-left:10rpx"> {{item.sendTypes}}</text></div>
				</div>
			</div>
			<div class="box-bottom" style="border-top:1px solid #DEDEDE;margin-top:20rpx;padding-top:32rpx">
				<div class="item-bottom">
					<div class="item-bottom-con">
						<div class="bottom-right" style="text-align: center;">
							<div style="width:188rpx;display: inline-block;" v-if="item.priceState==0 || item.priceState == 20 || item.priceState== 60 || item.priceState == 80 || item.priceState == 90">
								<u-button text="取消报价" shape="circle" plain size="small"  @click.native.stop="enSure('cancel',item)" ></u-button>
							</div>
							<div style="width:188rpx;display: inline-block;" 
							v-if="item.priceState==0 || 
							item.priceState == 20|| 
							item.priceState== 50 || 
							item.priceState== 60 ||
							item.priceState== 80 ||
							item.priceState== 90 ">
								<u-button text="修改报价" shape="circle" type="primary" size="small" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)"  @click.native.stop="edit(item)"></u-button>
							</div>
							<div style="width:188rpx;display: inline-block;margin-right:20rpx;" v-if="item.priceState==10">
								<u-button text="维持原价" shape="circle" type="primary" size="small" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)"  @click.native.stop="saveOldPrice(item)"></u-button>
							</div>
							<div style="width:188rpx;display: inline-block;" v-if="item.priceState==10">
								<u-button text="修改价格" shape="circle" type="primary" size="small" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)"  @click.native.stop="seeConfirm(item)"></u-button>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div style="padding-bottom:40rpx;">
	   <u-loadmore :status="status"></u-loadmore>
	</div>
	<!--确认价格-->
	<confirmPrice ref="confirmPrice" @refresh="refresh"></confirmPrice>
	
	<driver-page ref="driverPage"></driver-page>
	
  </view>
</template>

<script>
  import {
    priceList,
    editPrice,
    priceOperate
  } from '@/config/api2.js'
  import {getGuideDataAPI} from '@/config/api.js'
  import confirmPrice from '@/components/module/confirmPrice';
  import driverPage from '@/components/driver-page/driver-page';
  export default {
	  components: {
	    confirmPrice,driverPage
	  	
	  },
    data() {
      return {
        tabs: [
			{key: 'all',name: '全部'},
			{key: '0',name: '已报价'}, 
			{key: '10',name: '还价待确认'}, 
			{key: '20',name: '待成交'}, 
			{key: '30',name: '已成交'}, 
			{key: '40',name: '未成交'}, 
			{key: '50',name: '已取消'},
		],
        priceState: '',
        pageSize: 10,
        pageNum: 1,
        list: [],
        style: {
          width: '160rpx',
          marginRight: '10rpx'
        },
        style2: {
          width: '160rpx',
          background: '#ff9d02',
          border: 'none'
        },
		status: 'loadmore',
		count:0,
		steps:[]
      }
    },
    onShow() {
		this.clearData()
        this.getPriceList().then(()=>{
				this.$nextTick(()=>{
					getGuideDataAPI({
						pageUrl:'priceList'
					}).then((res)=>{
						this.steps=res
						this.$refs.driverPage.showPop(this.steps)
					}).catch((error)=>{
						console.log(error)
					})
				})
		})
    },
	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getPriceList()
	},
    methods: {
		refresh(){
			this.clearData();
			this.getPriceList()
		},
		saveOldPrice(item){
		  uni.showModal({
			title: '提示',
			content: '是否确认维持原价？',
			success: (res) => {
			  if (res.confirm) {
				priceOperate({
				  priceId: item.priceId,
				  operateType: 'confirm',
				  finalPrice:item.purchasePrice,
				}).then(res => {
				  this.refresh()
				})
			  } else if (res.cancel) {
				console.log('用户点击取消');
			  }
			}
		  });
		},
				 
				 
		seeConfirm(item){
		   this.$refs.confirmPrice.init(item,item.perServiceCharge,item.serviceType)
		},
      //清除数据
      clearData(){
      		this.pageNum = 1;
      		this.list = [];
      		this.status = 'loadmore';
      		this.count = 0;
      },
      getPriceList() {
	    this.status = 'loading';
        return priceList({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          priceState: this.priceState
        }).then(res => {
          this.list = this.list.concat(res.list ? res.list : [] );
          this.count = res.count;
		  if(this.list.length >= this.count) {
		  	this.status = 'nomore';
		  }else{
		  	this.status = 'loadmore';
		  }
        }).catch(()=>{
				this.status = 'loadmore';
		})
      },
      detail(row) {
        uni.navigateTo({
          url: "/pages/inquiry/inquiryInfo?inquiryId=" + row.inquiryId+'&formPath=my'
        })
      },
      edit(row) {
        uni.setStorage({
          key: 'quotation',
          data: row,
          success() {
            uni.navigateTo({
              url: "editQuotation?type=edit&priceId=" + row.priceId
            })
          }
        });
      },
      enSure(data, row) {
        uni.showModal({
          title: '提示',
          content: '是否确认操作？',
          success: (res) => {
            if (res.confirm) {
              priceOperate({
                priceId: row.priceId,
                operateType: data
              }).then(res => {
				this.clearData();
                this.getPriceList()
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      changeTabs(e) {
        this.priceState = e.key;
		this.clearData();
        this.getPriceList()
      },
    }
  }
</script>

<style lang="scss">
  @import '@/style/wmj.scss';

.quotationlist .con-list-div{
	    margin-top:32rpx;
  		.inquiry-list-item{
  			position: relative;
  			margin-bottom:30rpx;
			background: rgba(255,255,255,1);
			box-shadow: 0px 0px 10px rgba(0,17,52,0.09);
			border-radius: 18rpx;
			padding:32rpx;
  			.inquiry-state{
  				position: absolute;
  				right:0;
  				top:0;
  				z-index: 1;
  				width: 162rpx;
  				height: 75rpx;
  				background: #EFF5FF;
  				border-radius: 0px 18rpx 0px 18rpx;
  				text-align: center;
  				color: #FF5E01;
  				font-size:$m-font;
  				line-height: 75rpx;
  			}
  			.inquiry-state.grey{
  				color: #929292;
  				background: #DEDEDE;
  			}
  			.inquiry-state.yellow{
  				color: #FC9500;
  				background: #FFF4E5;
  			}
  			.box-top{
  				position: relative;
  				
  			}
			.box-mid{
				margin-top:20rpx;
				font-size:26rpx;
				color: #000;
				.mid-cell{
					margin-bottom:10rpx;
				}
				.mid-cell.flex-cell{
					@include flexbox(space-between,flex-start);
				}
			}
  		
  			.inquiry-item-top{
  				font-size: $m-font;
  				line-height: 40rpx;
  				color: #1E1E1E;
  				margin-top:10rpx;
  				position: relative;
  				font-weight: bold;
  				padding-right:180rpx;
  			}
  			.inquiry-item-top::after{
  				content: ' ';
  				position: absolute;
  				width: 6rpx;
  				height: 36rpx;
  				background: linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%);
  				border-radius: 3rpx;
  				overflow: hidden;
  				left:-35rpx;
  				top:0;
  			}
  			.item-attr{
  				padding:30rpx 0;
  				.attr-blur{
  					font-size: $s-font;
  					line-height: 34rpx;
  					color: #FF5E01;
  					border-radius: 22rpx;
  					background: #EFF5FF;
  					padding:4rpx 32rpx;
  					display: inline-block;
  					margin-right:20rpx;
  				}
  				.attr-yellow{
  					font-size: $s-font;
  					line-height: 34rpx;					
  					color: #FC9500;
  					border-radius: 22rpx;
  					background: #FFF4E5;
  					padding:4rpx 32rpx;
  					display: inline-block;
  				}
  			}
  			.item-cell-div{
				background: #F9F9F9;
				padding:20rpx;
				margin-top:28rpx;
				border-radius: 18rpx;
  				.item-cell{
  					font-size:24rpx;
  					.label{
  						color:#929292
  					}
  				}
  			}
  			.item-line{
  				height:2rpx;
  				background: #DEDEDE;
  				width:100%;
  			}
  			.item-bottom{
  				position: relative;
  				.item-bottom-con{
  					@include flexbox(space-between,center);
  					flex-direction:row-reverse;
  					.bottom-left{
  						position: relative;
  						.small-txt{
  							color: #1E1E1E;
  							font-size:20rpx;
  						}
  						.big-txt{
  							font-size: 48rpx;
  							font-weight: bold;
  							color: #FF0000;
  						}
  					}
  				}
  			}
  		}
  	
  		  
  		  
  	}
  
</style>